<template>
      <div class="container" style="width: 1000px">
        <div align="left">
          <span>Start a path search：</span>
          <a-button type="link" @click="demo">Load Demo</a-button>
        </div>
        <br>
<!--        stpe1-->
        <a-card
            style="border:solid black 1px"
          :head-style="{backgroundColor: '#2e75b6' }">
          <template #title >
            <div class="title">
              <span >Step 1: choose the knowledge graph</span>
            </div>
          </template>
          <a-row>
            <a-col :span="4">
              <div class="label">
                <span >
                    Knowledge graph:
                </span>
              </div>
            </a-col>
            <a-col :span="12">
              <a-radio-group
                  v-model:value="graphValue"
                  @change="selectTypeData(graphValue)"
                  name="radioGroup"
                  style="margin-left: 0vw">
                <a-radio value="POINT">
                  POINT
                  <a-tooltip
                      color="#ffffff"
                      :overlay-inner-style="{color: '#ed7d31'}"
                      placement="rightTop">
                      <template #title>
                        <span>POINT integrates three knowledge graphs including DRKG, PharmKG, and HERB.</span>
                      </template>
                      <QuestionCircleTwoTone />
                      <!--                  <button>dadw</button>-->
                  </a-tooltip>
                </a-radio>
                <a-radio value="DRKG">
                  <a href="https://github.com/gnn4dr/DRKG">DRKG</a>
                </a-radio>
                <a-radio value="PharmKG">
                  <a href="https://github.com/biomed-AI/PharmKG">PharmKG</a>
                </a-radio>
                <a-radio value="HERB">
                  <a type="link" href="http://herb.ac.cn/">HERB</a>
                </a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
        </a-card>
        <br>
<!--        step2-->
        <a-card
            style="border:solid black 1px"
            :head-style="{backgroundColor: '#2e75b6' }">
          <template #title >
            <div class="title">
              <span >Step 2: choose the source node</span>
            </div>
          </template>
          <a-row>
            <a-col :span="4">
              <div class="label">
                <span >
                  Source node:
                </span>
              </div>
            </a-col>
            <a-col :span="12">
              <span style="font-weight: bold">
                Type:
              </span>
              <a-radio-group
                  v-model:value="sourceValue"
                  name="radioGroup"
                  @change="read(sourceValue,graphValue)">
                <a-radio value="Compound">Compound / ingredient</a-radio>
                <a-radio value="Disease">Disease</a-radio>
                <a-radio value="Gene">Gene</a-radio>
              </a-radio-group>
            </a-col>
            <a-col :span="8">
              <span style="font-weight: bold">
                Entity name:
              </span>
              <a-select
                  show-search
                  size="middle"
                  style="width: 200px"
                  :options="sourceName"
                  placeholder="Source Node"
                  v-model:value="sourceNameValue"
              >
              </a-select>
            </a-col>
          </a-row>
        </a-card>
        <br>
<!--        step3-->
        <a-card
            style="border:solid black 1px"
            :head-style="{backgroundColor: '#2e75b6' }">
          <template #title >
            <div class="title">
              <span >Step 3: choose the target node</span>
            </div>
          </template>
          <a-row>
            <a-col :span="4">
              <div class="label">
                <span >
                   Target node:
                </span>
              </div>
            </a-col>
            <a-col :span="12">
              <span style="font-weight: bold">
                Type:
              </span>
              <a-radio-group
                  v-model:value="TartgetValue"
                  name="radioGroup"
                  @change="read2(TartgetValue,graphValue)">
                <a-radio value="Compound">Compound / ingredient</a-radio>
                <a-radio value="Disease">Disease</a-radio>
                <a-radio value="Gene">Gene</a-radio>
              </a-radio-group>
            </a-col>
            <a-col :span="8">
              <span style="font-weight: bold">
                Entity name:
              </span>
              <a-select
                  show-search
                  size="middle"
                  style="width: 200px"
                  :options="targetName"
                  placeholder="Target Node"
                  v-model:value="targetNameValue"
              >
              </a-select>
            </a-col>
          </a-row>
        </a-card>
        <br>
        <div align="center">
          <a-button type="primary" @click="submit">Start analysis</a-button>
        </div>

      </div>

</template>

<script>
import {reactive, computed, ref, watch, toRefs, onMounted} from "vue";
import $ from 'jquery'
import axios from 'axios'
import {useRouter} from "vue-router";
import {message} from "ant-design-vue";
import {QuestionCircleTwoTone}  from "@ant-design/icons-vue"
export default {
  name: "Search",
  // components:{QuestionCircleTwoTone},
  setup(){
    const router = useRouter()
    const data = reactive({
      graph:[{value:'DRKG'},{value:'PharmKG'}],
      NodeTypeAll:[
        {value:'Gene',category:'DRKG'},
        {value:'Compound',category:'DRKG'},
        {value:'Disease',category:'DRKG'},
        // {value:'Atc',category:'DRKG'},
        // {value:'Pharmacologic_Class',category:'DRKG'},
        // {value:'Side_Effect',category:'DRKG'},
        // {value:'Biological_Process',category:'DRKG'},
        // {value:'Cellular_Component',category:'DRKG'},
        // {value:'Molecular_Function',category:'DRKG'},
        // {value:'Pathway',category:'DRKG'},
        // {value:'Symptom',category:'DRKG'},
        {value:'Gene',category:'PharmKG'},
        {value:'Compound',category:'PharmKG'},
        {value:'Disease',category:'PharmKG'}
      ],
      NodeAllNAme:[],
      sourceNode:[],
      sourceName:[],
      targetName:[]
    })
    const param = reactive({
      graphValue:'DRKG',
      sourceValue:'Compound',
      TartgetValue:'Disease',
      sourceNameValue:null,
      targetNameValue:null
    })
    function selectTypeData(x){
      data.sourceNode = data.NodeTypeAll.filter(item =>item.category== x)
    }
    //读取数据
    function read(sourcetype,graphValue){
      if(graphValue=='DRKG'){
        $.get('JSON/DRGK/'+sourcetype+".json",function (x){
          // data.sourceName = x.filter(item => item.category==sourcetype)
          data.sourceName=x
        })
      }else if(graphValue=='PharmKG'){
        $.get('JSON/PharmKG/'+sourcetype+".json",function (x){
          data.sourceName=x
        })
      }else if(graphValue=='HERB'){
        $.get('JSON/HERB/'+sourcetype+".json",function (x){
          data.sourceName=x
        })
      }else if(graphValue=='POINT'){
        $.get('JSON/POINT/'+sourcetype+".json",function (x){
          data.sourceName=x
        })
      }

    }
    function read2(targettype,graphValue){
      if(graphValue=='DRKG'){
        $.get('JSON/DRGK/'+targettype+".json",function (x){
          // data.targetName = x.filter(item => item.category==targettype)
          data.targetName=x
        })
      }else if (graphValue=='PharmKG'){
        $.get('JSON/PharmKG/'+targettype+".json",function (x){
          data.targetName=x
        })
      }else if (graphValue=='HERB'){
        $.get('JSON/HERB/'+targettype+".json",function (x){
          data.targetName=x
        })
      }else if (graphValue=='POINT'){
        $.get('JSON/POINT/'+targettype+".json",function (x){
          data.targetName=x
        })
      }

    }
    onMounted(()=>{
      selectTypeData('DRKG')
      read('Compound','DRKG')
      read2('Disease','DRKG')
    })
    watch(()=>param.graphValue,()=>{
      param.sourceValue=null
      param.sourceNameValue=null
      param.TartgetValue=null
      param.targetNameValue=null
    })
    function sumit2(){
      router.push({
        path:'/detail'
      })
    }
    function submit(){
      if (param.targetNameValue !='' && param.TartgetValue !='' && param.sourceValue !='' && param.sourceNameValue !=''){
        axios({
          method:'post',
          url:'/test/deepnp/kg/db',
          data:{
            Knowledge_graph:param.graphValue,
            Source_Type:param.sourceValue,
            Source_Node:param.sourceNameValue,
            Target_Type:param.TartgetValue,
            Target_Node:param.targetNameValue
          }
        }).then((res)=>{
          window.parent.location.href='http://point.gene.ac/retrieve/?taskid='+res.data.data.task_id+"&demo=KG1"
          router.push({
            path:'/detail',
            query:{
              taskid:res.data.data.task_id,
              Knowledge_graph:param.graphValue,
              Source_Type:param.sourceValue,
              Source_Node:param.sourceNameValue,
              Target_Type:param.TartgetValue,
              Target_Node:param.targetNameValue
            },
          })
        }).catch(()=>{
          message.error('Request Failed!')
        })
      }else {
        message.info("Select Cannot be empty")
      }


    }
    function demo(){
      param.graphValue='DRKG'
      param.sourceValue='Compound'
      param.sourceNameValue='Curcumin'
      param.TartgetValue='Disease'
      param.targetNameValue='Carcinoma, Non Small Cell Lung'
    }

    return{
      ...toRefs(data),
      ...toRefs(param),
      selectTypeData,
      read,
      read2,
      submit,
      demo
    }
  }
}
</script>

<style scoped>
.title{
  text-align: left;
  color: white;
  font-weight: bold;
}
.label{
  text-align: right;
  font-size: 16px;
}
a{
  color: #1890ff;
  text-decoration-line: none;
}
a-radio{
  font-size: 16px;
}
</style>